<script lang="js" setup name="SvgIcon">
import { ref, computed } from "vue";

const props = defineProps({
    icon: {
        type: String,
        required: true
    },
    class: {
        type: String,
        default: ""
    },
    color: {
        type: String,
        default: ""
    },
    size: {
        type: String,
        default: "32px"
    }
});

const svgClass = computed(() => {
    if (props.class) {
        return `${props.class}`;
    } else {
        return "";
    }
});

const svgStyle = computed(() => {
    return {
        display: "flex",
        verticalAlign: "middle",
        overflow: "hidden",
        fill: props.color,
        width: props.size,
        height: props.size
    };
});
</script>

<template>
	<div class="svg-container">
		<svg :class="svgClass" :style="svgStyle" aria-hidden="true">
			<use :xlink:href="`#${icon}`" />
		</svg>
	</div>
</template>

<style lang="scss" scoped>
.svg-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
</style>
